:root {
  /* 苹果星云 */
  --bg: linear-gradient(135deg, #0a0a0f 0%, #1b0f2e 35%, #16213e 100%);
  --glass: rgba(255, 255, 255, .12);
  --blur: 28px;
  --radius: 14px;

  /* Apple Silicon 霓虹 */
  --cmt: #5acfa8;
  --kw: #4fc1ff;
  --str: #f063b9;
  --fn: #e2c082;
  --num: #9ef0f0;
  --accent: #0a84ff;
  --text: #f5f5f7;
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 微光粒子 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 25% 35%, rgba(79, 193, 255, .15) 0%, transparent 60%),
    radial-gradient(circle at 75% 65%, rgba(240, 99, 185, .12) 0%, transparent 60%);
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translate(0, 0)
  }
  50% {
    transform: translate(-30px, -20px)
  }
  100% {
    transform: translate(0, 0)
  }
}

.frame {
  position: relative;
  width: clamp(320px, 90vw, 960px);
  height: clamp(420px, 78vh, 640px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  transition: width .4s, height .4s, border-radius .4s;
}

.frame.fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

@media (max-width:768px) {
  .frame {
    width: 100vw;
    height: 100vh;
    border-radius: 0
  }
}

.titlebar {
  height: 38px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  display: flex;
  align-items: center;
  padding-left: 18px;
  gap: 8px;
}

.dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}

.dot::after {
  /* 微光扩散 */
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s;
}

.dot:hover {
  transform: scale(1.25)
}

.dot:hover::after {
  opacity: 1
}

.dot:nth-child(1) {
  background: #ff5f57
}

.dot:nth-child(2) {
  background: #ffbd2e
}

.dot:nth-child(3) {
  background: #28ca42
}

.dot:nth-child(1):hover::after {
  box-shadow: 0 0 12px #ff5f5780
}

.dot:nth-child(2):hover::after {
  box-shadow: 0 0 12px #ffbd2e80
}

.dot:nth-child(3):hover::after {
  box-shadow: 0 0 12px #28ca4280
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
  line-height: 1.65;
  scroll-behavior: smooth;
}

h1 {
  margin-bottom: .8em;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--accent)
}

h2 {
  margin: 1.4em 0 .6em;
  font-size: 1.2em;
  color: var(--kw)
}

p {
  margin-bottom: .9em
}

a {
  color: var(--str);
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

.works {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 18px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--kw) transparent
}

.works::-webkit-scrollbar {
  height: 6px
}

.works::-webkit-scrollbar-thumb {
  background: var(--kw);
  border-radius: 3px
}

.card {
  flex: 0 0 220px;
  padding: 18px;
  background: rgba(0, 0, 0, .35);
  border-radius: 12px;
  font-size: .9em;
  border: 1px solid rgba(255, 255, 255, .08);
}

.card h3 {
  font-size: 1em;
  margin-bottom: .4em;
  color: var(--accent)
}

.card p {
  font-size: .8em;
  color: #d1d1d6
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 社交媒体样式 */
.social-media {margin:28px 0}
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.social-item{background:var(--glass);padding:8px 16px;border-radius:8px;display:flex;align-items:center}
.social-label{margin-right:8px;color:var(--kw);font-weight:500}
.social-item a{color:var(--str);text-decoration:none}
.social-item a:hover{text-decoration:underline}

img {
  max-width: 100%;
}